<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 径向渐变</title>
    <style>
        .radial-box {
            width: 360px;
            height: 200px;
            border: 5px solid hsla(60, 50%, 80%, .8);
        }
        
        .raidal-demo-00 {
            background: radial-gradient(hsla(120, 70%, 60%, 0.9), hsla(360, 60%, 60%, 0.9))
        }
        .raidal-demo-01 {
            background: radial-gradient(circle at center, hsla(120, 70%, 60%, 0.9), hsla(360, 60%, 60%, 0.9))
        }
        .raidal-demo-02 {
            background: radial-gradient(circle at bottom, hsla(120, 70%, 60%, 0.9), hsla(360, 60%, 60%, 0.9))
        }
        .raidal-demo-03 {
            background: radial-gradient(circle at top right, hsla(120, 70%, 60%, 0.9), hsla(360, 60%, 60%, 0.9))
        }
    </style>
</head>

<body>
    <div class="radial-box raidal-demo-00"></div>
    <div class="radial-box raidal-demo-01"></div>
    <div class="radial-box raidal-demo-02"></div>
    <div class="radial-box raidal-demo-03"></div>
</body>

</html>